<template>
  <div>
    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="70px" class="demo-ruleForm">
      <el-row>
        <el-col v-for="item in searchModel" :span="8">
          <el-form-item :label="item.label" prop="">
            <el-select v-if="item.type == 'select'" v-model="listQuery[item.vModel]" clearable style="width: 100%;" placeholder="请选择">
              <el-option
                v-for="i in item.options"
                :key="i[item.value]"
                :label="i[item.name]"
                :value="i[item.value]"/>
            </el-select>

            <el-input v-if="item.type == 'text'" v-model="listQuery[item.vModel]" clearable placeholder="请输入内容"/>

            <components v-if="item.type == 'components'" :is="item.name" v-model="listQuery[item.vModel]"/>

          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="end">
        <el-col :span="3">
          <el-button type="primary" @click="sss">搜索</el-button>
        </el-col>
      </el-row>
    </el-form>

    <div style="margin-top: 20px;">
      <tabelList
        :tabel-data="list"
        :table-head="TableHead"
        :row-handle-but="rowHandleBut"
        :list-query="listQuery"
        :total="total"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
        @selectionChange="selectionChange"
        @choiceRow="_choiceRow"/>
    </div>

  </div>
</template>

<script>
/*
  * searchModel :  配置弹框列表中 需要搜索的条件
  *   type: 代表form 类型 ( select, text )
  *   label: 每个form 的提示内容标签
  *   options: 当类型为 select 时候必传 , 存储的是下来菜单的数据
  *   name: 当类型为 select 的时候必传 ,在下拉菜单中显示的标签
  *   value: 当类型为 select 的时候必传 , 下拉菜单中选中的时候拿取的字段
  *   vModel: 绑定的字段名称 ,( 也就是后台接受的字段名称 )
  *
  *
  searchModel: [
    {
      type: 'select',
      label: '产品',
      options: [],
      name: 'name',
      value: 'id',
      vModel: 'productId'
    },
    {
      type: 'text',
      label: '名称',
      vModel: 'name'
    }
  ]
  * */

import tabelList from 'components/TabelList'

import Warehouse from 'components/Warehouse'
import ZoneGroup from 'components/ZoneGroup'
import Zone from 'components/Zone'
export default {
  name: 'Index',
  components: {
    tabelList,
    Warehouse,
    ZoneGroup,
    Zone
  },
  props: ['ListFun', 'searchModel', 'TableHead'],
  data() {
    return {
      temp: {},
      rules: {},

      // 表格基础参数
      // TableHead: [],
      listQuery: {
        pageNumber: 1,
        pageSize: 1,
        sizes: 1
      },
      list: [],
      total: 0,
      rowHandleBut: [
        {
          butValue: '选择',
          butEvent: 'choiceRow',
          type: 'primary'
        }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {

    // 获取列表
    getList() {
      this.listData(this.listQuery)
    },

    // 加载列表数据
    listData(data) {
      const self = this
      this.list = []
      var fun = this.ListFun
      fun(data).then(response => {
        var pageInfo = response.data.data.pageInfo
        var list = pageInfo.list
        var total = pageInfo.total
        self.list = list
        self.total = total
      })
    },

    // 搜索
    sss() {
      console.log(this.listQuery)
      this.getList()
    },

    // 某一条选择按钮点击
    _choiceRow(row) {
      this.$emit('choiceRow', row)
    },

    // 列表复选框选中
    selectionChange(rowId, rowArray) {
      console.log(rowId)
      console.log(rowArray)
    },

    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },

    handleCurrentChange(val) {
      this.listQuery.pageNumber = val
      this.getList()
    }
  }
}
</script>

<style scoped>

</style>
